<style lang="less" >
.third-login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #f2f2f2;

  .third-login-container {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:#ffffff;

    .container-wrapper{
      margin:56px 74px 0 74px;
    }
    .user-info-bg {
      width: 600px;
      height: 96px;
      border-radius: 8px;
      background-color: rgba(241, 241, 241, 1);
      display: flex;
      align-items: center;
      padding-left: 40px;
    }
    .user-info {
      position:relative;
      .user-info-bg;
    }

    .form-input {
      width: 462px;
      border-radius: 16px;
      background-color: rgba(241, 241, 241, 1);
      font-size: 28px;
      border: none;
      margin-bottom: 0;
      line-height: normal;
      padding: 0 0 0 0px;
    }

    .marginBottom38 {
      margin-bottom: 38px;
    }

    .user-info-pwd-message {
      position:relative;
      .user-info-bg;
      .form-input {
        width: 428px;
      }
      .get-validate-code {
        position: absolute;
        right: 32px;
        width: 128px;
        height: 56px;
        line-height: 56px;
        border-radius: 4px;
        background-color: rgba(81, 104, 255, 1);
        color: rgba(255, 255, 255, 1);
        font-size: 30px;
        margin: 0;
        padding: 0;
        text-align: center;
        vertical-align: text-bottom !important;
      }
    }

    input::-webkit-input-placeholder {
      color: #aab2bd;
    }

    .next-btn {
      margin-top: 106px;
      width: 600px;
      height: 96px;
      border-radius: 8px;
      background-color: #536dfe;
      box-shadow: 0px 5px 12px 0px rgba(83, 109, 254, 0.44);
      line-height: 66px;
      color: rgba(255, 255, 255, 1);
      font-size: 36px;
    }
  }

  .desc {
    font-size: 40px;
    color: rgba(61, 60, 60, 1);
    margin-bottom: 68px;
  }
}

.jeicon {
  color: #cfcfcf;
  font-size: 22px;
}

.delete {
  position: absolute;
  right: 32px;
}

.phone-desc {
  margin-top: 8px;
  font-size: 18px;
  margin-left: 40px;
  color: rgba(61, 60, 60, 1);
  margin-bottom: 21px;
}
</style>

<template>
  <div class="third-login">
    <div class="third-login-container">
      <div class="container-wrapper">
        <div class="desc">
          输入手机号
        </div>
        <div class="user-info marginBottom38">
          <input
            v-model="loginInfo.phone"
            type="tel"
            placeholder="请输入手机号"
            class="form-input"
            maxlength="11"
          >
          <i
            @tap="clearPhone"
            class="jeicon jeicon-error-circle delete"
          />
        </div>
        <div class="user-info-pwd-message ">
          <input
            v-model="loginInfo.validateCode"
            type="number"
            placeholder="请输入验证码"
            class="form-input"
            oninput="if(value.length>6)value=value.slice(0,6)"
            maxlength="6"
            pattern="\d*"
          >
          <button
            @tap="getValidateCode"
            class="get-validate-code"
          >
            <span v-show="sendAuthCode">获取</span>
            <span v-show="!sendAuthCode">{{ auth_time }}s</span>
          </button>
        </div>
        <button
          @tap="next"
          class="next-btn"
        >
          下一步
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  fetchSendValidateCode,
  fetchCheckValidate,
} from '../../actions/login';
import { validate, toastValidate } from '../../util/validate';
import { openWindow } from '@/util/util';

export default {
  name: 'ForgetPwd',
  components: {},
  data() {
    return {
      loginInfo: {},
      sendAuthCode: true, // 判断
      auth_time: 0,
    };
  },
  created() {},
  mounted() {
    const oldBack = mui.back;
    mui.back = () => {
      JE.setLSItem('activeViewPwd');
      oldBack();
    };
    document.addEventListener('pause', () => {
      JE.setLSItem('activeViewPwd', plus.webview.currentWebview().id);
    }, false);
  },
  methods: {
    // 下一步
    async next() {
      if (
        !toastValidate('手机号', validate.isNull(this.loginInfo.phone))
        || !toastValidate(
          '',
          validate.isPhone(this.loginInfo.phone),
          '手机号格式不正确',
        )
        || (!this.loginState
          && !toastValidate(
            '验证码',
            validate.isNull(this.loginInfo.validateCode),
          ))
      ) {
        return false;
      }

      // 校验验证码
      const validateCodeRes = await fetchCheckValidate({
        email: this.loginInfo.phone,
        type: 'PHONE',
        cz: 'ZH',
        code: this.loginInfo.validateCode,
      });
      if (validateCodeRes.success) {
        openWindow({
          url: './pages_setNewPwd_index.html',
          id: '__setNewPwdView',
          title: '忘记密码',
          extras: {
            phone: this.loginInfo.phone,
            validateCode: this.loginInfo.validateCode,
            deptId: '',
          },
        });
      } else {
        mui.toast(validateCodeRes.message);
        return false;
      }
    },
    // 获取验证码
    async getValidateCode() {
      if (
        !toastValidate('手机号', validate.isNull(this.loginInfo.phone))
        || !toastValidate(
          '',
          validate.isPhone(this.loginInfo.phone),
          '手机号格式不正确',
        )
      ) {
        return false;
      }
      if (this.sendAuthCode) {
        const res = await fetchSendValidateCode({
          email: this.loginInfo.phone,
          type: 'PHONE',
          cz: 'ZH',
        });
        mui.toast(res.msg);
        if (res.success) {
          this.sendAuthCode = false;
          // localStorage.setItem('forgetpwd', this.loginInfo.phone);
          this.auth_time = 59;
          const authTimetimer = setInterval(() => {
            this.auth_time--;
            if (this.auth_time <= 0) {
              this.sendAuthCode = true;
              clearInterval(authTimetimer);
            }
          }, 1000);
        }
      }
    },
    clearPhone() {
      this.loginInfo.phone = '';
    },
  },
};
</script>
